<template>
  <div class="headerFrame">
    <img src="../../static/img/剑客.jpeg" alt="" class="headerImg1" />
    <img src="../../static/img/女二.jpeg" alt="" class="headerImg2" />
  </div>

  <h2 style="margin: 10px 20px">分类</h2>
  <el-scrollbar style="height: 50px">
    <div style="display: flex">
      <div v-for="item in tagsArr" :key="item" class="scrollbar-item">
        <el-button type="warning" @click="getSongListFun(item.name)">
          {{ item.name }}
        </el-button>
      </div>
    </div>
  </el-scrollbar>

  <h2 style="margin: 10px 20px">{{ tagTitle }}</h2>

  <div class="SongList" v-loading="loading">
    <div v-for="item in songList" class="imgBox">
      <div class="imgDiv">
        <img :src="item.imgUrl" class="listImg" @click="toSonglistContent(item.id)" />
      </div>
      <p class="des">{{ item.des }}</p>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import {
  getSongListTags,
  getSongList,
  getSongListContent,
  getHighqualitySongLis,
} from "../../service/songs";
import { storage } from "@/stores/storage";
import router from "../../router";

export default defineComponent({
  name: "songList",
  mounted() {
    this.getHighqualitySongLisFun();
    this.getSongListTagsFun();
  },
  setup() {
    const store = storage();
    let loading = ref(true);

    const { tagsArr } = storeToRefs(store);
    let tagTitle = ref("推荐");
    function getSongListTagsFun() {
      getSongListTags().then((res) => {
        if (res.status === 200) {
          let data = res.data.tags;
          store.setTagArr(data);
        }
      });
    }
    let songList = ref([]);
    function getSongListFun(tag) {
      tagTitle.value = tag;
      let tagobj = {
        cat: tag,
        limit: 20,
      };
      getSongList(tagobj)
        .then((res) => {
          let tableData = [];
          if (res.status === 200) {
            let data = res.data.playlists;
            for (let i = 0; i < data.length; i++) {
              tableData[i] = {};
              tableData[i].imgUrl = data[i].coverImgUrl;
              tableData[i].des = data[i].name;
              tableData[i].id = data[i].id;
            }
            songList.value = tableData;
          } else {
            ElMessage("网络错误");
          }
        })
        .catch(function (err) {
          if (err) {
            ElMessage("网络错误");
          }
        });
    }
    function getHighqualitySongLisFun() {
      getHighqualitySongLis()
        .then((res) => {
          let tableData = [];
          let data = res.data.playlists;
          for (let i = 0; i < data.length; i++) {
            tableData[i] = {};
            tableData[i].imgUrl = data[i].coverImgUrl;
            tableData[i].des = data[i].name;
            tableData[i].id = data[i].id;
          }
          songList.value = tableData;
          loading.value = false;
        })
        .catch(function (err) {
          if (err) ElMessage("网络错误");
        });
    }
    function toSonglistContent(id) {
      store.setSongListId(id);
      router.push({
        path: "/songListContent",
      });
    }
    return {
      getSongListTagsFun,
      getSongListFun,
      toSonglistContent,
      getHighqualitySongLisFun,
      tagsArr,
      songList,
      loading,
      tagTitle,
    };
  },
});
</script>

<style scoped>
.imgBox {
  width: 150px;
  height: 190px;
  float: left;
  margin: 5px 19px;
  overflow: hidden;
  border-radius: 5px;
  padding: 5px;

  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.listImg {
  width: 150px;
  height: 150px;
}
.listImg:hover {
  transform: scale(1.1);
  transition: 0.5s ease-in-out;
}
.imgDiv {
  overflow: hidden;
  border-radius: 15px;
}
.des {
  display: block;
  font-size: 15px;
  height: 40px;
}
.scrollbar-item {
  margin: 5px 10px;
  height: 40px;
}
.headerFrame {
  position: relative;
  width: 900px;
  height: 150px;
  border-radius: 10px;
  margin: 20px 50px 10px;
}
.headerImg1 {
  display: block;
  position: absolute;
  width: 150px;
  height: 355px;
  top: 150px;
  left: 60px;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  border-radius: 10px;
}
.headerImg2 {
  display: block;
  position: absolute;
  width: 150px;
  height: 355px;
  top: 0px;
  right: -90px;
  transform-origin: 0 0;
  transform: rotate(90deg);
  border-radius: 10px;
}
</style>
